<template>
    <view>
        <!-- pages/forumdisplay/forumdisplay.wxml -->

        <view class="containView">
            <view class="classInfoBg borderShowdow">
                <view class="easyTalkDesc">
                    <view class="class-numberItem">
                        <view class="class-number">{{ dataDic.Variables.forum.posts ? dataDic.Variables.forum.posts : '0' }}</view>
                        <view class="class-numberItem-name">总帖数</view>
                    </view>
                    <view class="class-numberItem">
                        <view class="class-number">{{ dataDic.Variables.forum.threads ? dataDic.Variables.forum.threads : '0' }}</view>
                        <view class="class-numberItem-name">主题</view>
                    </view>
                    <view class="class-numberItem">
                        <view class="class-number">{{ dataDic.Variables.forum.rank ? dataDic.Variables.forum.rank : '0' }}</view>
                        <view class="class-numberItem-name">排名</view>
                    </view>
                </view>
                <view class="forum-desc"><rich-text :nodes="dataDic.Variables.forum.description"></rich-text></view>
            </view>
        </view>

        <view class="messageList borderShowdow">
            <view class="easyTalkNav">
                <block v-for="(item, index) in easyNav" :key="index">
                    <view :class="'easyTalkNavItem  ' + (order == index ? 'easyTalkActive' : '')" :id="index" @tap="navClick">{{ item.name }}</view>
                </block>
            </view>

            <view class="easyTop" v-if="toplist.length > 0">
                <block v-for="(item, index) in toplist" :key="index">
                    <view class="easyTopCell" :id="index" @tap="topCellClick">
                        <text>置顶</text>
                        {{ item.subject }}
                    </view>
                </block>
            </view>

            <block v-for="(cellItem, cellIdx) in datalist" :key="cellIdx">
                <view class="classCell" :id="cellIdx" @tap="cellClick">
                    <image class="class-cell-avatar" :src="userAvatar + cellItem.authorid"></image>
                    <view class="class-cell-contentView">
                        <view class="username">
                            {{ member_nickname ? member_nickname : cellItem.author }}
                        </view>
                        <view class="message">
                            <text class="special" v-if="cellItem.special != 0 && cellItem.special != 2 && cellItem.special != 5">
                                <block v-if="cellItem.special == 1">投票</block>
                                <block v-if="cellItem.special == 2">商品</block>
                                <block v-if="cellItem.special == 3">悬赏</block>
                                <block v-if="cellItem.special == 4">活动</block>
                                <block v-if="cellItem.special == 5">辩论</block>
                            </text>
                            {{ cellItem.subject }}
                        </view>

                        <rich-text class="class-cell-time" :nodes="cellItem.dateline"></rich-text>
                        <view class="toolRight">
                            <view class="shareHidden borderShowdow" v-if="cellItem.shareshow == 1">
                                <button open-type="share" :plain="true" @tap.stop.prevent="listShare" :id="cellIdx">
                                    <image class="shareIcon" :src="minImgDoc + 'workshare.png'"></image>
                                </button>
                                <button :plain="true" @tap.stop.prevent="disVoice" :id="cellIdx">
                                    <image class="shareIcon" :src="minImgDoc + 'workvoice.png'"></image>
                                </button>
                            </view>
                            <image src="" class="discIcon" :src="minImgDoc + 'cpostmessage.png'" @tap.stop.prevent="discClick" :data-tid="cellItem.tid" :id="cellIdx"></image>
                        </view>
                    </view>
                </view>
            </block>
            <view class="emptyView" v-if="datalist.length == 0 && toplist.length == 0">
                <view style="width: 100%; height: 10rpx"></view>
                <image :src="minImgDoc + 'emptyIcon.png'"></image>
                <view class="emptyMsg">
                    <block v-if="order != 3">
                        您可真幸运，版块第一篇内容属于您发布的，赶紧去
                        <text @tap.stop.prevent="postEnter">发布</text>
                        吧
                    </block>
                    <block v-else>还没有精华推荐哦~</block>
                </view>
            </view>
        </view>
        <view class="noMoreView" v-if="noMore">别再用力了，你已经滑到底啦</view>

        <!-- postEnter -->
        <post_selectMask :group="dataDic.Variables.group" :allowspecialonly="dataDic.Variables.forum.allowspecialonly" :postTypeArr="postTypeArr" @postThread="postThreadType">
            <image :src="minImgDoc + 'postEnter.png'" class="postEnter borderShowdow" v-if="currentTab != 0" @tap="postEnter">发布</image>
        </post_selectMask>

        <video id="myVideo" :class="fullScreen ? 'show' : 'hide'" :autoplay="true" @play="playVideo" @fullscreenchange="fullScreenChange" :src="currentVideo"></video>
    </view>
</template>

<script>

const minImgDoc = require('../../config').minImgDoc;

const forumdisplayUrl = require('../../config').forumdisplayUrl;

const userAvatar = require('../../config').userAvatar;

const util = require('../../utils/util.js');

const loginmanager = require('../../utils/loginManager');

const app = getApp();

export default {
    data() {
        return {
            userAvatar,
            minImgDoc,
            fid: '',
            toplist: [],
            pagenum: 1,
            notThisFidCount: 0,
            order: 0,
            fullScreen: false,

            easyNav: [
                {
                    name: '全部'
                },
                {
                    name: '最新'
                },
                {
                    name: '热帖'
                },
                {
                    name: '精华'
                }
            ],

            types: '',
            datalist: '',

            dataDic: {
                Variables: {
                    forum: {
                        posts: false,
                        threads: false,
                        rank: false,
                        description: '',
                        allowspecialonly: "0"
                    },

                    group: {}
                }
            },

            postTypeArr: [],
            noMore: '',
            currentVideo: '',
            is_moving_slider: false,
            currentAudio: '',

            cellItem: {
                cellIdx: '',
                authorid: '',
                author: '',
                special: 0,
                attachlist: [],

                videoA: [
                    {
                        attachment: ''
                    }
                ],

                imageA: [],
                audioA: '',
                dateline: '',
                shareshow: 0,
                tid: ''
            },

            cellIdx: 0,
            member_nickname: false,
            aidx: 0,

            attItem: {
                aid: '',
                thumb: ''
            },

            video: {
                aid: '',
                attachment: ''
            },

            audio: {
                aid: ''
            },

            is_play: '',
            attachment: '',
            listIndex: [],
            current_process: [],
            total_process: '',
            slider_max: '',
            slider_value: '',
            currentTab: 0
        };
    },
    onLoad: function (options) {
        this.fid = options.fid;
      uni.showLoading();
      this.requestData();
      this.setupAudioPlayer();
    },
    onReady() {
        this.videoContext = uni.createVideoContext('myVideo');
    },
    onUnload: function () {
        this.innerAudioContext.destroy();
    },
    onPullDownRefresh: function () {
        this.pagenum = 1;
        this.notThisFidCount = 0;
        this.requestData();
    },
    onReachBottom: function () {
        if (!this.noMore) {
            this.pagenum++;
            this.requestData();
        }
    },
    methods: {
        navClick(e) {
            this.order= e.currentTarget.id;this.pagenum= 1;
            this.requestData();
        },

        refreshRequest() {
            this.pagenum = 1;
            this.requestData();
        },

        requestData() {
            var data = {
                fid: this.fid,
                page: this.pagenum,
                submodule: 'checkpost'
            };

            if (this.order) {
                switch (this.order) {
                    case '0':
                        {
                        }
                        break;

                    case '1':
                        {
                            data['filter'] = 'author';
                            data['orderby'] = 'dateline';
                        }
                        break;

                    case '2':
                        {
                            data['filter'] = 'heat';
                            data['orderby'] = 'heats';
                        }
                        break;

                    case '3':
                        {
                            data['filter'] = 'digest';
                            data['digest'] = '1';
                        }
                        break;
                }
            }

            app.globalData.apimanager
                .getRequest(forumdisplayUrl, data)
                .then((res) => {
                    uni.stopPullDownRefresh();
                    uni.hideLoading();

                    if (res.Message) {
                        let messageval = res.Message.messageval;

                        if (
                            messageval.indexOf('nonexistence') != -1 ||
                            messageval.indexOf('nopermission') != -1 ||
                            messageval.indexOf('beoverdue') != -1 ||
                            messageval.indexOf('nomedal') != -1
                        ) {
                            uni.showModal({
                                title: '提示',
                                content: res.Message.messagestr,
                                showCancel: false,
                                confirmText: '知道了',
                                success: function (res) {
                                    if (res.confirm) {
                                        uni.navigateBack();
                                    }
                                }
                            });
                            return;
                        }
                    }

                    let arr1 = res.Variables.forum_threadlist;

                    if (res.Variables.threadtypes) {
                        this.types= res.Variables.threadtypes.types;
                    }

                    var topArr = [];
                    var commonArr = [];
                    var topCheckArr = ['1', '2', '3'];

                    for (let i = 0; i < arr1.length; i++) {
                        let postItem = arr1[i];

                        if (postItem.message && postItem.message.length > 0) {
                            postItem.message = util.filterHtml(postItem.message);
                        }

                        let attachments = postItem.attachlist;

                        if (attachments) {
                            let imageA = [];
                            let audioA = [];
                            let videoA = [];

                            for (let k = 0; k < attachments.length; k++) {
                                let attItem = attachments[k];
                                let realIndex = commonArr.length;

                                if (this.pagenum > 1) {
                                    realIndex = commonArr.length + this.datalist.length;
                                }

                                if (attItem.type == 'image') {
                                    attItem['toolUse'] = {
                                        listIndex: realIndex,
                                        imageIndex: k
                                    };
                                    imageA.push(attItem);
                                } else {
                                    if (attItem.type == 'audio') {
                                        let total_process = '00:00';

                                        if (attItem.description) {
                                            total_process = util.formatTime(parseInt(attItem.description));
                                        }

                                        attItem['toolUse'] = {
                                            attachment: attItem.attachment,
                                            listIndex: realIndex,
                                            total_process: total_process
                                        };
                                        audioA.push(attItem);
                                    } else {
                                        if (attItem.type == 'video') {
                                            videoA.push(attItem);
                                        }
                                    }
                                }
                            }

                            postItem['imageA'] = imageA;
                            postItem['audioA'] = audioA;
                            postItem['videoA'] = videoA;
                        }

                        if (topCheckArr.indexOf(postItem.displayorder) != -1) {
                            if (this.pagenum == 1) {
                                if (this.fid != postItem.fid) {
                                    this.notThisFidCount++;
                                }
                            }

                            topArr.push(postItem);
                        } else {
                            commonArr.push(postItem);
                        }
                    }

                    if (this.pagenum == 1) {
                        this.toplist= topArr;
                    }

                    arr1 = commonArr;

                    if (this.pagenum > 1 && arr1.length > 0) {
                        arr1 = this.datalist.concat(arr1);
                    }

                    this.datalist= arr1;this.dataDic= res;
                    var group = res.Variables.group;
                    var postTypeArr = [];

                    if (res.Variables.forum.allowspecialonly == 0) {
                        postTypeArr.push(0);
                    }

                    if (group) {
                        if (group.allowpostpoll) {
                            postTypeArr.push(1);
                        }

                        if (group.allowpostactivity) {
                            postTypeArr.push(4);
                        }
                    }

                    this.postTypeArr= postTypeArr;
                    var noMore = false;
                    var getTotal = this.datalist.length + this.toplist.length;
                    var threadCount = parseInt(res.Variables.forum.threadcount) + this.notThisFidCount;

                    if (getTotal >= threadCount) {
                        noMore = true;
                    }

                    this.noMore= noMore;
                    uni.setNavigationBarTitle({
                        title: res.Variables.forum.name
                    });
                })
                .catch((res) => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                });
        },

        // 播放视频 -------------------
        clickVideo(e) {
            this.currentVideo= e.currentTarget.id;
            this.videoContext.play();
            this.videoContext.requestFullScreen({
                direction: 0
            });
            this.fullScreen= true;
        },

        fullScreenChange(e) {
            if (!e.detail.fullScreen) {
                this.videoContext.stop();
                this.fullScreen= false;
            }
        },

        /* *********************** 语音相关start *********** */
        setupAudioPlayer() {
            this.innerAudioContext = uni.createInnerAudioContext();
            this.innerAudioContext.obeyMuteSwitch = false;
            this.innerAudioContext.onEnded((res) => {
                this.currentAudio.toolUse.is_ended = true;
                this.stopVoice();
            });
            this.innerAudioContext.onTimeUpdate(() => {
                if (!this.is_moving_slider) {
                    // 播放中
                    this.currentAudio = this.datalist[this.currentAudio.toolUse.listIndex].audioA[0];
                    let param = {};
                    let toolUsestr = 'datalist[' + this.currentAudio.toolUse.listIndex + '].audioA[0].toolUse';
                    let toolUse = this.currentAudio.toolUse;
                    toolUse['current_process'] = util.formatTime(this.innerAudioContext.currentTime);
                    toolUse['slider_value'] = Math.floor(this.innerAudioContext.currentTime);
                    toolUse['slider_max'] = Math.floor(this.innerAudioContext.duration);
                    param[toolUsestr] = toolUse;
                    this.setData(param);
                }
            });
        },

        // 拖动进度条，到指定位置
        hanle_slider_change(e) {
            const position = e.detail.value;
            this.seekCurrentAudio(position);
        },

        // 拖动进度条控件
        seekCurrentAudio(position) {
            this.innerAudioContext.seek(position);
        },

        // 进度条滑动
        handle_slider_move_start() {
            this.is_moving_slider= true;
        },

        handle_slider_move_end() {
            this.is_moving_slider= false;
        },

        // 点击播放暂停
        audio_play(e) {
            let listIndex = e.currentTarget.dataset.listindex;
            let postItem = this.datalist[listIndex];
            let currentAudio = postItem.audioA[0];
            this.currentAudio= currentAudio;
            var param = {};
            let audioset = 'datalist[' + listIndex + '].audioA[0].toolUse.currentAudio';
            param[audioset] = currentAudio.attachment;
            let isplay = this.currentAudio.toolUse.is_play;
            let playstr = 'datalist[' + listIndex + '].audioA[0].toolUse.is_play';
            param[playstr] = !isplay;
            this.setData(param);

            if (isplay) {
                this.innerAudioContext.pause();
                isplay = false;
            } else {
                if (!isplay && !this.currentAudio.toolUse.is_ended) {
                    this.playVoice();
                } else {
                    this.innerAudioContext.play();
                }
            }
        },

        playVoice() {
            this.innerAudioContext.src = this.currentAudio.attachment;
            this.innerAudioContext.play();
        },

        stopVoice() {
            var param = {};
            let toolUsestr = 'datalist[' + this.currentAudio.toolUse.listIndex + '].audioA[0].toolUse';
            let toolUse = this.currentAudio.toolUse;
            toolUse['is_play'] = false;
            toolUse['slider_value'] = 0;
            toolUse['current_process'] = util.formatTime(0);
            param[toolUsestr] = toolUse;
            this.setData(param);
            this.innerAudioContext.stop();
            this.currentAudio = this.datalist[this.currentAudio.toolUse.listIndex].audioA[0];
        },

        /* *********************** 语音end *********** */
        lookImage(e) {
            let cellItem = this.datalist[e.currentTarget.dataset.cellindex];
            let imageA = cellItem.imageA;
            var imageSrcArray = [];

            for (let i = 0; i < imageA.length; i++) {
                let item = imageA[i];
                imageSrcArray.push(item.attachment);
            }

            uni.previewImage({
                current: imageSrcArray[e.currentTarget.id],
                urls: imageSrcArray
            });
        },

        topCellClick(e) {
            var item = this.toplist[e.currentTarget.id];
            this.toDetail(item);
        },

        cellClick(e) {
            var item = this.datalist[e.currentTarget.id];
            this.toDetail(item);
        },

        toDetail(item) {
            var special = item.special;
            var tid = item.tid;
            var url = '../thread_detail/thread_detail?tid=';

            if (special == 1) {
                url = '../questionnaire_detail/questionnaire_detail?tid=';
            } else {
                if (special == 3) {
                    url = '../question_answer_detail/question_answer_detail?tid=';
                } else {
                    if (special == 4) {
                        url = '../activity_detail/activity_detail?tid=';
                    }
                }
            }

            url += tid;
            uni.navigateTo({
                url: url
            });
        },

        postEnter() {
            if (!loginmanager.isLogin()) {
                return;
            }

            if (this.postTypeArr.length > 1) {
                return;
            }

            var special = this.postTypeArr[0];
            this.postSelect(special);
        },

        postThreadType(e) {
            this.postSelect(e.detail);
        },

        postSelect(special) {
            if (special == 0) {
                uni.navigateTo({
                    url: '../post_thread/post_thread?fid=' + this.fid
                });
            } else {
                if (special == 1) {
                    uni.navigateTo({
                        url: '../post_question/post_question?fid=' + this.fid
                    });
                } else {
                    if (special == 4) {
                        uni.navigateTo({
                            url: '../activity_post/activity_post?fid=' + this.fid
                        });
                    }
                }
            }
        },

        listShare() {
            console.log('占位：函数 listShare 未声明');
        },

        disVoice() {
            console.log('占位：函数 disVoice 未声明');
        },

        discClick() {
            console.log('占位：函数 discClick 未声明');
        },

        playVideo() {
            console.log('占位：函数 playVideo 未声明');
        }
    }
};
</script>
<style>
@import './forumdisplay.css';
</style>
